<template>
	<div class="gerenzhongxin">
		<div class="xufeizhong">
			<ul>
				<li>
					<router-link :to="'/home/'+luyou+'/gerenzhongxin/gerenxinxi'">个人信息</router-link>
				</li>
				<li>
					<router-link :to="'/home/'+luyou+'/gerenzhongxin/jilu'">购买记录</router-link>
				</li>
			</ul>
		</div>
		
		<div class="xiaceng">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default{
		name:"gerenzhongxin",
		data(){
			return{
				luyou:'',
				tiaoluyou:''
			}
		},
		created(){
			this.luyou=this.$route.path.split("/")[2];
		},
		activated(){
			this.$router.push(this.tiaoluyou)
		},
		beforeRouteLeave(to,form,next){
			this.tiaoluyou=this.$route.path;
			next();
		},
		mounted:function(){
			
			$(".xufeizhong ul li").click(function(){
				$(this).children().css({
					'border-bottom':'2px solid #0091FF' ,
					'color': '#0091FF',
				})
				$(this).siblings().children().css({
					'border-bottom':'none' ,
					'color': '#333',
				})
			})
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.gerenzhongxin{
		.xufeizhong{
			background-color: #fff;
			border-top-left-radius:0.1rem ;
			border-top-right-radius:0.1rem ;
			padding-bottom:1rem ;
			ul{
				list-style: none;
				padding-left:1.5rem ;
				border-bottom:1px solid #E7E7E7 ;
				li{
					float: left;
					margin: 0 1.5rem;
					a{
						cursor: pointer;
						display: block;
						padding: 1rem 0rem;
						color: #333333;
						font-size: 0.5rem;
						text-decoration: none;
					}
					.router-link-active{
						border-bottom:2px solid #0091FF ;
						color: #0091FF;
					}
				}
			}
			ul::after{
				content: "";
				display: block;
				clear: both;
			}
		}
	}
</style>
